﻿<!DOCTYPE html>
<html>
<head>
    <title id='Description'>jqxChart Dashboard Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <style type="text/css">
        .chart-inner-text
        {
            fill: #00BAFF;
            color: #00BAFF;
            font-size: 30px;
            font-family: Verdana;
        }    
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            function displayClusterMetrics() {
                var metrics =
                [
                    {
                        name: 'Cluster capacity',
                        value: 55,
                        max: 64
                    },
                    {
                        name: 'Avg. CPU %',
                        value: 37,
                        max: 100
                    },
                    {
                        name: 'Storage capacity [TB]',
                        value: 89.3,
                        max: 256
                    },
                    {
                        name: 'Network utilization %',
                        value: 47,
                        max: 100
                    }
                ];

                for (var i = 0; i < metrics.length; i++) {

                    var data = [];

                    data.push({ text: 'Used', value: metrics[i].value }); // current
                    data.push({ text: 'Available', value: metrics[i].max - metrics[i].value }); // remaining

                    var settings = {
                        title: metrics[i].name,
                        description: '',
                        enableAnimations: true,
                        showLegend: false,
                        showBorderLine: true,
                        backgroundColor: '#FAFAFA',
                        padding: { left: 5, top: 5, right: 5, bottom: 5 },
                        titlePadding: { left: 5, top: 5, right: 5, bottom: 5 },
                        source: data,
                        showToolTips: true,
                        seriesGroups:
                        [
                            {
                                type: 'donut',
                                useGradientColors: false,
                                series:
                                    [
                                        {
                                            showLabels: false,
                                            enableSelection: true,
                                            displayText: 'text',
                                            dataField: 'value',
                                            labelRadius: 120,
                                            initialAngle: 90,
                                            radius: 60,
                                            innerRadius: 50,
                                            centerOffset: 0
                                        }
                                    ]
                            }
                        ]
                    };

                    var selector = '#chartContainer' + (i + 1).toString();

                    var valueText = metrics[i].value.toString();

                    settings.drawBefore = function (renderer, rect) {
                        sz = renderer.measureText(valueText, 0, { 'class': 'chart-inner-text' });

                        renderer.text(
                        valueText,
                        rect.x + (rect.width - sz.width) / 2,
                        rect.y + rect.height / 2,
                        0,
                        0,
                        0,
                        { 'class': 'chart-inner-text' }
                        );
                    }

                    $(selector).jqxChart(settings);
                    $(selector).jqxChart('addColorScheme', 'customColorScheme', ['#00BAFF', '#EDE6E7']);
                    $(selector).jqxChart({ colorScheme: 'customColorScheme' });
                }
            }

            function displayServerResponseMetrics() {
                var data =
                    [
                        { hour: 0, latency: 235, requests: 3500 },
                        { hour: 1, latency: 231, requests: 3400 },
                        { hour: 2, latency: 217, requests: 3350 },
                        { hour: 3, latency: 215, requests: 3260 },
                        { hour: 4, latency: 225, requests: 3320 },
                        { hour: 5, latency: 235, requests: 3400 },
                        { hour: 6, latency: 239, requests: 3550 },
                        { hour: 7, latency: 255, requests: 4100 },
                        { hour: 8, latency: 251, requests: 4200 },
                        { hour: 9, latency: 259, requests: 4500 },
                        { hour: 10, latency: 265, requests: 4560 },
                        { hour: 11, latency: 257, requests: 4500 },
                        { hour: 12, latency: 265, requests: 4490 },
                        { hour: 13, latency: 261, requests: 4400 },
                        { hour: 14, latency: 258, requests: 4350 },
                        { hour: 15, latency: 257, requests: 4340 },
                        { hour: 16, latency: 255, requests: 4200 },
                        { hour: 17, latency: 245, requests: 4050 },
                        { hour: 18, latency: 241, requests: 4020 },
                        { hour: 19, latency: 239, requests: 3900 },
                        { hour: 20, latency: 237, requests: 3810 },
                        { hour: 21, latency: 236, requests: 3720 },
                        { hour: 22, latency: 235, requests: 3610 },
                        { hour: 23, latency: 239, requests: 3550 },
                    ];

                var latencyThreshold = 260;

                var settings = {
                    title: 'Get request per second & response latencies',
                    description: '(Aggregated values for the last 24h)',
                    enableAnimations: true,
                    showLegend: false,
                    showBorderLine: true,
                    backgroundColor: '#FAFAFA',
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 5, top: 5, right: 5, bottom: 5 },
                    source: data,
                    xAxis:
                    {
                        dataField: 'hour',
                        displayText: 'Hour',
                    },
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                valueAxis:
                                {
                                    title: { text: 'Request Latency [ms]<br>' },
                                    position: 'left'
                                },
                                toolTipFormatSettings: { sufix: ' ms'},
                                series:
                                    [
                                        {
                                            dataField: 'latency',
                                            displayText: 'Request latency',
                                            colorFunction: function (value, itemIndex, serie, group) {
                                                return (value > latencyThreshold) ? '#CC1133' : '#55CC55';
                                            }
                                        }
                                    ],
                                bands:
                                [
                                    {
                                        minValue: latencyThreshold,
                                        maxValue: latencyThreshold,
                                        lineWidth: 1,
                                        color: 'red'
                                    }
                                ]
                            },
                            {
                                type: 'spline',
                                valueAxis:
                                {
                                    title: { text: 'Get Requests per second' },
                                    position: 'right'
                                },
                                toolTipFormatSettings: { sufix: ' req/s'},
                                series:
                                    [
                                        {
                                            dataField: 'requests',
                                            displayText: 'Get requests',
                                            lineColor: '#343F9B',
                                            lineWidth: 2
                                        }
                                    ]
                            },

                        ]
                };

                $(chartContainer5).jqxChart(settings);
            }

            displayClusterMetrics();
            displayServerResponseMetrics();
        });
    </script>
</head>
<body class='default'>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td><div id='chartContainer1' style="width: 400px; height: 180px;"></div></td>
            <td><div id='chartContainer2' style="width: 400px; height: 180px;"></div></td>
        </tr>
        <tr>
            <td><div id='chartContainer3' style="width: 400px; height: 180px;"></div></td>
            <td><div id='chartContainer4' style="width: 400px; height: 180px;"></div></td>    
        </tr>
        <tr>
        <td colspan="2">
            <div id='chartContainer5' style="width: 800px; height: 300px;"></div>
        </td>
        </tr>
    </table>
</body>
</html>
